<!DOCTYPE html>
<html>
<!-- head -->
{include file="common/page/head"}
<body>
<!---------------- 添加 ------------------->

<!-- 页头 -->
{include file="common/page/header"}

<!-- jsfiles -->
{include file="common/page/jsfiles"}
<link href="__app__/admin/view/Shop/addShop/addShop.css" type="text/css" rel="stylesheet">
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
body, button, input, select, textarea {
    font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
    width:603px;
    padding-top:3px;
    overflow:hidden;
}
#container {
   width:600px;
   height:400px;
}
.search-btn{
	background: #428BCA;
	color: #fff;
	border-radius: 5px;
	padding: 4px 5px;
}
.modal-dialog .modal-body{
	overflow-x: hidden;
}
</style>
<script type="text/javascript" src="__static__/js/map.qq.js"></script>
<script>
var geocoder, map, marker = null;
var lat = 31.823726;
var lng = 117.239664;
var detail = '';
var mapinit = function() {
	
	var center = new qq.maps.LatLng(lat,lng);
    map = new qq.maps.Map(document.getElementById("container"),{
        center: center,
        zoom: 13
    });
    
    //创建marker
    marker = new qq.maps.Marker({
        position: center,
        map: map
    });
     
    geocoder = new qq.maps.Geocoder();
    
    //绑定单击事件添加参数
    qq.maps.event.addListener(map, 'click', function(event) {
 
    	marker.setMap(null);
    	lat = event.latLng.getLat();
    	lng = event.latLng.getLng();
    	codeLatLng();
        //创建marker
        map.setCenter(event.latLng);
	    marker = new qq.maps.Marker({
	        position: new qq.maps.LatLng(lat,lng),
	        map: map
	    });
    });   
}

//搜索 地址 并获取经纬度
 function codeAddress() {
    var address = document.getElementById("sera_address").value;
    //对指定地址进行解析
    geocoder.getLocation(address);
    //设置服务请求成功的回调函数
    geocoder.setComplete(function(result) {
    	lat = result.detail.location.lat;
    	lng = result.detail.location.lng;
    	detail = result.detail.address;

    	$('#address').val(detail);
    	$('#latitude').val(lat);
    	$('#longitude').val(lng);
        map.setCenter(result.detail.location);
        marker.setMap(null);
        marker = new qq.maps.Marker({
            map: map,
            position: result.detail.location
        });
        //点击Marker会弹出反查结果
        qq.maps.event.addListener(marker, 'click', function() {
            alert("坐标地址为： " + result.detail.location);
        });
    });
    //若服务请求失败，则运行以下函数
    geocoder.setError(function() {
        alert("出错了，请输入正确的地址！！！");
    });
}
 
 
// 根据经纬度获取 地址
  function codeLatLng() {
   
    var latLng = new qq.maps.LatLng(lat, lng);
    $('#latitude').val(latLng.lat);
	$('#longitude').val(latLng.lng);
    //对指定经纬度进行解析
    geocoder.getAddress(latLng);
    //设置服务请求成功的回调函数
    geocoder.setComplete(function(result) {
    	var res = result.detail.addressComponents;
    	detail = res.country + res.city + res.district + res.street + res.streetNumber;
    	$('#address').val(detail);
    });
                //若服务请求失败，则运行以下函数
    geocoder.setError(function() {
        alert("出错了，请输入正确的经纬度！！！");
    });

   }
</script>

<body onload="mapinit()">
<!-- 主体 -->
<div class="content container-fluid{if $leftBarScale eq '1'} scale{/if}">
    <div class="row">
        <div class="col-md-2 left-section">
            <!-- 左导航菜单 -->
            {include file="common/page/menu"}

        </div>
        <div class="col-md-10 right-section">
            <!--内容区域-->
            <h3><i class="icon iconfont">{$Think.session.currentMenu.icon}</i>添加门店</h3>
            <div class="inner-section row">
                <div class="items add-div">
                    <form id="myForm" action="#" method="post" enctype="multipart/form-data">
                        <div class="item table-responsive">
                            <table class="table table-striped table-hover table-bordered table-base">
                                <tbody>
                                    <tr>
		                                <td class="td1"><label><span class="must-tag">*</span>门店名称</label></td>
		                                <td class="td2"><input type="text" class="form-control" id="name" name="name" placeholder="门店名称"></td>
		                                <td class="td3"></td>
		                            </tr>
									<tr>
		                                <td class="td1"><label><span class="must-tag">*</span>联系方式</label></td>
		                                <td class="td2"><input type="text" class="form-control" id="phone" name="phone" placeholder="联系方式"></td>
		                                <td class="td3"></td>
		                            </tr>
		                            <tr>
		                                <td><label for="imgurl"><span class="must-tag">*</span>商家主图</label></td>
		                                <td><input class="imgurl form-control" accept="image/*"  title="支持jpg、jpeg、gif、png格式，文件小于5M" tabindex="3" type="file" id="imgurl" name="imgurl" size="3"> 建议尺寸：640*350px</td>
	                                		
		                                <td></td>
		                            </tr>
		                            <tr>
		                                <td><label for="simple_desc"><span class="must-tag">*</span>商家简述</label></td>
		                                <td><input type="text" class="form-control" name="simple_desc" id="simple_desc" placeholder="商家简述"></td>
		                                <td></td>
		                            </tr>
		                            <tr>
		                                <td class="td1"><label><span class="must-tag">*</span>点击选取详细位置</label></td>
		                                <td class="td2">
		                                	<input id="sera_address" type="textbox"  value="安徽合肥">
		        							<a class="search-btn" href="javascrip:;" onclick="codeAddress()">搜索</a>
		        							<span style="color: red;">(一定要点击地图选择位置)</span>
		                                	<div id="container"></div>
		                                </td>
		                                <td class="td3"></td>
		                            </tr>
									<tr>
										<td class="td1"><label><span class="must-tag">*</span>详细地址</label></td>
										<td class="td2"><input class="form-control" type="text"  name="address" placeholder="详细地址"></td>
										<td class="td3"></td>
									</tr>
		                            <tr>
		                                <td>
		                                	<input type="hidden" name="latitude" value="" id="latitude">
	                               			<input type="hidden" name="longitude" value="" id="longitude">
		                                </td>
		                                <td>
		                                    <button type="button" class="btn btn-success btn-md" id='save'>提交</button>
		                                    <a class="btn btn-default btn-md" href="javascript:window.history.go(-1);">返回</a>
		                                </td>
		                                <td></td>
		                            </tr>
                                </tbody>
                            </table>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
{include file="common/page/footer"}
<script type="text/javascript" src="__static__/js/form/jquery.form.js"></script>
<script type="text/javascript" src="__static__/js/form/jquery.validate.js"></script>
<script type="text/javascript" src="__static__/js/form/jquery.validate.extend.js"></script>
<script type="text/javascript" src="__app__/admin/view/Shop/addShop/addShop.js"></script>
</body>
</html>